<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 200px" class="filter-item" placeholder="姓名或账户"
                v-model="listQuery.name"></el-input>
      <el-button class="filter-item" type="primary" size="mini" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="tresourceManager_btn_add" size="mini" style="margin-left: 10px" @click="handleCreate"
                 type="primary" icon="el-icon-circle-plus-outline">添加
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" size="mini" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">

      <el-table-column align="center" label="id" min-width="290" v-if="false">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="资源名称">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="185px" align="center" label="url">
        <template slot-scope="scope">
          <span>{{scope.row.url}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="185px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createdatetime}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="280px" align="center" label="父级资源id" >
        <template slot-scope="scope">
          <span>{{scope.row.pid}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="描述">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="185">
        <template slot-scope="scope">
          <el-button v-if="tresourceManager_btn_edit" size="mini" icon="el-icon-edit" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="tresourceManager_btn_del" size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  background
                     :current-page.sync="listQuery.page" :page-sizes="[5,10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" size="mini" ref="form" label-width="100px">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="url" prop="url">
          <el-input v-model="form.url" placeholder="请输入"></el-input>
        </el-form-item>
        <!--<el-form-item label="" prop="createdatetime">-->
          <!--<el-input v-model="form.createdatetime" placeholder="请输入"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="父级资源id" prop="pid">
          <el-input v-model="form.pid" placeholder="请输入"></el-input>
          <div>
            <b-btn v-b-modal.modalPrevent>请选择父级资源</b-btn>
            <!-- Modal Component -->
            <b-modal id="modalPrevent"
                     ref="modal"
                     title="选择父级资源"
                     centered
                     ok-title="确定"
                     cancel-title="取消"
                     button-size="sm"
                     @ok="handleOk"
                     @shown="initTree">
              <ul id="menuList" class="ztree"></ul>
            </b-modal>
          </div>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')" size="mini">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" size="mini" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" size="mini" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  page,
  addObj,
  getObj,
  delObj,
  putObj
} from '../../../api/yun/tresource/index'
import {mapGetters} from 'vuex'
import $ from 'jquery'
import 'ztree'
import 'ztree/css/metroStyle/metroStyle.css'
import '../../../../static/bootstrapStyle.css'
import { MessageBox } from 'element-ui'
export default {
  name: 'tresource',
  data () {
    return {
      setting: {
        view: {
          selectedMulti: false,
          showIcon: true // 是否显示图标
        },
        check: {
          enable: true,
          chkboxType: { 'Y': 's', 'N': 's' }
        },
        data: {
          key: {
            url: 'xUrl',
            icon: 'conx'
          },
          simpleData: {
            enable: true,
            idkey: 'id',
            pIdKey: 'pid',
            rootPid: null
          }
        },
        edit: {
          enable: false
        }},
      form: {
        name: undefined, url: undefined, createdatetime: undefined, pid: undefined, remark: undefined
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: false,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 60,
            message: '长度在 3 到 60 个字符',
            trigger: 'blur'
          }
        ],
        createdatetime: [
          {
            required: false,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        pid: [
          {
            required: false,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 36,
            message: '长度在 3 到 36 个字符',
            trigger: 'blur'
          }
        ],
        remark: [
          {
            required: false,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 100,
            message: '长度在 3 到 100 个字符',
            trigger: 'blur'
          }
        ]
      },
      list: null,
      list2: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 5,
        name: undefined
      },
      listQuery2: {
        page: 1,
        limit: 5000
      },
      dialogFormVisible: false,
      dialogStatus: '',
      tresourceManager_btn_edit: false,
      tresourceManager_btn_del: false,
      tresourceManager_btn_add: false,
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableKey: 0
    }
  },
  created () {
    this.getList()
    // console.log('this.$route.path:' + this.$route.path)
    this.getList2()
  },
  computed: {
    ...mapGetters([])
  },
  methods: {
    initTree () {
      $.fn.zTree.init($('#menuList'), this.setting, this.list2)
    },
    handleOk (evt) {
      evt.preventDefault()
      var treeObj = $.fn.zTree.getZTreeObj('menuList')
      var nodes = treeObj.getCheckedNodes(true)
      var _this = this

      if (nodes.length === 1) {
        _this.form.pid = nodes[0].id
        this.$refs.modal.hide()
      } else if (nodes.length > 1) {
        _this.$message({
          message: '父级菜单不能多选!',
          type: 'warning'
        })
      } else if (nodes.length === 0) {
        MessageBox.confirm('当前操作要清掉父级菜单，可以取消继续留在该页面', '确定清除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.form.pid = ''
          this.$refs.modal.hide()
        })
      }
    },
    getList () {
      this.listLoading = true
      page(this.listQuery)
        .then(response => {
          this.list = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }).catch(() => {
          this.$message({
            message: '您没有权限操作',
            type: 'warning'
          })
          this.listLoading = false
        })
    },
    getList2 () {
      page(this.listQuery2)
        .then(response => {
          this.list2 = response.data.rows
        })
    },
    handleFilter () {
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.page = val
      this.getList()
    },
    handleCreate () {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate (row) {
      getObj(row.id)
        .then(response => {
          this.form = response.data
          this.dialogFormVisible = true
          this.dialogStatus = 'update'
        })
    },
    handleDelete (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delObj(row.id)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              const index = this.list.indexOf(row)
              this.list.splice(index, 1)
              this.total = this.total - 1
            })
        })
    },
    create (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form)
            .then(() => {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
        } else {
          return false
        }
      })
    },
    cancel (formName) {
      this.dialogFormVisible = false
      const set = this.$refs
      set[formName].resetFields()
    },
    update (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          this.form.password = undefined
          delete this.form['createdatetime']
          delete this.form['modifydatetime']
          delete this.form['createdatetimeStart']
          delete this.form['createdatetimeEnd']
          putObj(this.form.id, this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    resetTemp () {
      this.form = {
        username: undefined,
        name: undefined,
        sex: '男',
        password: undefined,
        description: undefined
      }
    }
  },
  beforeUpdate: function () {
    var pre = '/' + this.$route.path.split('/').pop()
    this.$store.getters.resources.forEach(item => {
      // console.log(item.url)
      if (item.url === (pre + '/add')) {
        this.tresourceManager_btn_add = true
      }
      if (item.url === (pre + '/update')) {
        this.tresourceManager_btn_edit = true
      }
      if (item.url === (pre + '/delete')) {
        this.tresourceManager_btn_del = true
      }
    })
  }
}
</script>
